<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>手机商城</title>
<!-- CSS -->
<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
<link rel="stylesheet" href="{url:#css/materialize.min.css}" />
<link rel="stylesheet" href="{url:#css/me.css}" />
<link rel="stylesheet" href="{url:#css/iconfont.css}" />
<style type="text/css">
body{
	background-color:#FFFFFF;
}
a{
	color:black;
}
</style>

<!-- JS -->
<script src="{url:#js/jquery-1.11.3.min.js}"></script>
<script src="{url:#js/materialize.min.js}"></script>
<script src="{url:#js/json2.js}"></script>
<script src="{url:#js/yang_check.js}"></script>

{echo:JS::import('form');}
</head>
<body>
<!-- TitleBar 开始 -->
<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper red accent-4 valign-wrapper">
      <ul class="left">
        <li><a  class="disabled" style="visibility:hidden"><i class="iconfont">&#xe63c;</i></a></li>
      </ul>
      <span class="title-bar-size center_align">购物车</span>
      <ul class="right">
        <li><a  class="disabled" style="visibility:hidden"><i class="iconfont">&#xe63c;</i></a></li>
      </ul>
    </div>
  </nav>
</div>
<!-- TitleBar 结束 -->

<!-- 商品列表 开始 -->
<div class="cart-list">
	<ul>
		{list:items=$my_car key=$k item=$item}
				<li>
					<div class="row mgr-0 padd-0">
						<div class="col s1 cart-sel-tag unselected">
							<span class="sp_check" product_id="{$item['product_id']}" sell_price="{$item['sell_price']}"><i class="iconfont">&#xe66d;</i>
						</span>
						</div>
						<div class="col s11 cart-item">
							<!-- 购物车商品展示部分 -->
							<div style="float:left">
								<!-- 
								<img src="{url:#images/temp/classify_two.png}" width="80" height="80"/>
								-->
								<img src="{$item['img']}" width="80" height="80"/>
							</div>
							<div>
								<span class="black-text" style="font-size:1.2em;">{$item['name']}</span><br/>	
								<span style="color:#626262;font-size:0.8em;">规格: {$item['spec']}</span><br/>
								<span class="red-text" style="font-size:1.2em; font-weight:500;">￥{$item['sell_price']}</span><br/>	
							</div>
							<div class="clearfix"></div>
							<div class="deshed-divider"></div>
							<!-- 购物车操作部分 -->
							<div class="cart-action">
								<div class="num">
									<i class="iconfont" onclick="do_buy_num('+',this)" product_id="{$item['product_id']}">&#xe669;</i>
									<div class="sel-num" sell_price="{$item['sell_price']}">{$item['buy_nums']}</div>
									<i class="iconfont" onclick="do_buy_num('-',this)" product_id="{$item['product_id']}">&#xe66a;</i>
								</div>
								<div class="del" onclick="del_shopping_car({$k})">
									<i class="iconfont">&#xe672;</i>删除
								</div>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
				</li>
				<li><div class="divider"></div></li>
		{/list}
	</ul>	
</div>
<!-- 商品列表 结束 -->

<input type="hidden" name="hid_href" id="hid_href" value=''/>

<div class="cart-toolbar">
	<div class="row">
		<div class="col s8" style="color:#FFFFFF">
			<span style="font-size:1.4em;">合计：￥<span id="sp_total_money">0.00</span></span><br/>
			<span style="font-size:1.1em;">总额：￥<span id="sp_total_zje">{$total_zje}</span></span>
		</div>
		<div class="col s4" style="background:#FF0000;height:50px;color:#FFFFFF;font-size:1.7em;font-weight:600;text-align:center;line-height:50px;vertical-align:middle;">
			<span id="sp_js">去结算</span>
		</div>
	</div>
</div>
<script type="text/javascript">

//var total_money = 0.00;
var total_zje = parseFloat( "{$total_zje}" );
var json_obj = {};

//json_obj.product_id=80;
//json_obj.buy_num = 20;
//var s = JSON.stringify(json_obj);


function change_href()
{
	var sp_total_money = parseFloat( $("#sp_total_money").text() );
	if( sp_total_money > 0 )
	{
		var json_str = JSON.stringify( json_obj ).replace(/\"/g,"'");
		$("#sp_js").html("<a href=\"{url:/mobile/sub_order}&json_str="+json_str+"\" style='color:white;'>去结算</a>");
	}
	else
	{
		$("#sp_js").html("<span>去结算</span>");
	}
}
/**
 * 添加元素到数组中
 */
function addItemArray(key, buy_num )
{
	json_obj[key] = buy_num;
	$("#hid_href").val( JSON.stringify( json_obj ).replace(/\"/g,"'") );
	/*
	var json_str = JSON.stringify( json_obj ).replace(/\"/g,"'");
	var sp_total_money = parseFloat( $("#sp_total_money").text() );
	if( sp_total_money > 0 )
	{
		$("#sp_js").html("<a href=\"{url:/mobile/sub_order/json_str="+json_str+"}\" style='color:white;'>去结算</a>");
	}
	*/
}

/**
 * 移除数组中指定的某个元素
 */
function removeItemArray( key )
{
	delete json_obj[key];
	$("#hid_href").val( JSON.stringify( json_obj ) );
}

function do_buy_num(arg, obj)
{
	//获取当前商品id
	var product_id = $(obj).attr('product_id');
	
	if(arg == '+')
	{
		var buy_num = parseInt($(obj).next("div").eq(0).text());
		buy_num += 1;
		$(obj).next("div").eq(0).text( buy_num );
		
		var this_sell_price  = parseFloat( $(obj).next("div").eq(0).attr('sell_price') );
		total_zje += this_sell_price;

		var left_c_is_check = $(obj).parent().parent().parent().prev("div").eq(0).attr('class');
		if( left_c_is_check == 'col s1 cart-sel-tag selected')
		{
			var t_money = parseFloat( $("#sp_total_money").text() );
			t_money += this_sell_price;
			$("#sp_total_money").text( t_money.toFixed(2) );
		}

		addItemArray(product_id, buy_num);
	}
	
	if(arg == '-')
	{
		var buy_num = parseInt($(obj).prev("div").eq(0).text());

		if(buy_num > 1)
		{
		    var this_sell_price  = parseFloat( $(obj).prev("div").eq(0).attr('sell_price') );
		    total_zje -= this_sell_price;

		    var left_c_is_check = $(obj).parent().parent().parent().prev("div").eq(0).attr('class');
			if( left_c_is_check == 'col s1 cart-sel-tag selected')
			{
				var t_money = parseFloat( $("#sp_total_money").text() );
				t_money -= this_sell_price;
				$("#sp_total_money").text( t_money.toFixed(2) );
			}
		}
		
		buy_num -= 1;
		if(buy_num <= 1)
		{
			buy_num = 1;
		}

		$(obj).prev("div").eq(0).text( buy_num );

		addItemArray(product_id, buy_num);
	}

	
	$("#sp_total_zje").text( total_zje.toFixed(2) );


	change_href();
}


/**
 * 删除购物车
 */
function del_shopping_car( product_id )
{
	if( confirm('确定要执行此操作吗?') )
	{
		$.post("{url:/mobile/del_shopping_car}",{product_id:product_id},function(data){
			if(data['status']=='success')
		    {
			    //alert(data['msg']);
			    document.location.href=document.location.href;
	        }
	        else
		    {
	            yang_alert(data['msg']);
	        }
	    },'json');
	}
}


$(function(){	
	
	$(".sp_check").each(function(){

		$(this).click(function(){
			
			//获得单个商品的product_id
			var product_id = $(this).attr('product_id');
			
			//获得单个商品的购买数量
			var this_buy_num = parseInt( $(this).parent().parent().children().eq(1).children().eq(4).children().eq(0).children().eq(1).text() );
			
			var this_money = parseFloat( $(this).attr('sell_price') );

			//单价*数量
			var this_total_money = this_money * this_buy_num;
			
			var t_money = parseFloat( $("#sp_total_money").text() );
			
			var c_v = $(this).parent().attr('class');
			
			if(c_v == 'col s1 cart-sel-tag selected')
			{
				$(this).parent().attr("class", "col s1 cart-sel-tag unselected");
				t_money -= this_total_money;

				//将该元素从数组中删除
				removeItemArray( product_id );
			}
			else
			{
				$(this).parent().attr("class", "col s1 cart-sel-tag selected");
				t_money += this_total_money;

				//将元素添加到数组中
				addItemArray(product_id, this_buy_num);
				
			}

			$("#sp_total_money").text( t_money.toFixed(2) );
			
			var t_money = parseFloat( $("#sp_total_money").text() );

			if( t_money > 0 )
			{
				//$("#sp_js").html("<a href='http://www.baidu.com' style='color:white;'>去结算</a>");
			}			
			else
			{
				$("#sp_js").text("去结算");
			}
			

			change_href();
			//console.log(JSON.stringify(json_obj));
		});
	});
});

</script>
</body>
</html>
